<!-- 公司注册 -->
<template>
  <div class="qiyeyonghu">
    <i>*</i>
    <el-form
      :model="ruleForm2"
      status-icon
      ref="ruleForm2"
      :rules="rules"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item label="联系人姓名" prop="name">
        <el-input type="text" v-model="ruleForm2.name" auto-complete="off" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm2.pass" auto-complete="off" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm2.checkPass"
          auto-complete="off"
          placeholder="请再次输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item label="联系人手机" prop="tel">
        <el-input v-model.number="ruleForm2.tel" placeholder="请输入手机号"></el-input>
      </el-form-item>

      <el-form-item label="公司名称" prop="companyName">
        <el-input
          type="text"
          v-model="ruleForm2.companyName"
          auto-complete="off"
          placeholder="请输入公司名称"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          class="register"
          type="primary"
          style="width:412px;margin-left:70px"
          @click.stop="gotoRegister('ruleForm2')"
          :disabled="disabled1"
          :loading="loading"
        >注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "companyRegistry",
  data() {
    let checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号码不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value.length < 11) {
            callback(new Error("手机号码位数缺失"));
          } else {
            callback();
          }
        }
      }, 1000);
    };

    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };

    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      disabled1: false, // 防止按钮重复提交的状态
      ruleForm2: {
        name: "",
        pass: "",
        checkPass: "",
        tel: "",
        companyName: "" // 公司名称
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          },
           {
            pattern: /^[\u4E00-\u9FA5]{2,4}$/,
            message: "请输入2-4个汉字"
          },
        ],
        pass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur"
          }
        ],
        checkPass: [
          {
            required: true,
            message: "请确认密码",
            trigger: "blur"
          },
          {
            validator: validatePass2,
            trigger: "blur"
          }
        ],
        tel: [
          {
            validator: checkAge,
            required: true,
            message: "请输入正确的电话号码",
            trigger: "blur"
          },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "目前只支持中国大陆的手机号码"
          }
        ],
        companyName: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: "blur"
          },
           {
            pattern: /^[\u4E00-\u9FA5]{2,4}$/,
            message: "请输入正确的公司名称"
          },
        ]
      }
    };
  },
  methods: {
    //点击注册
    gotoRegister(ruleForm2) {
      this.loading = true;
      this.$refs[ruleForm2].validate(valid => {
        if (valid) {
          console.log(valid);
          let param = {
            username: this.ruleForm2.name, // 用户名
            password: this.ruleForm2.pass, // 密码
            name: this.ruleForm2.companyName, // 公司名称
            phone: this.ruleForm2.tel // 手机号
          };

          try {
            this.$http({
              method: "post",
              url: `/api/index/register/register`,
              // timeout: 5000,
              // headers: {'X-Requested-With': 'XMLHttpRequest'},    // 必须加这个请求头 否则报错：500
              data: {
                param,
                code: "fdimall"
              }
            })
              .then(res => {
                console.log(res);
                let _data = res.data;
                if (_data.State.Code == 200) {
                  console.log(_data); // 成功时候的数据
                  this.$notify({
                    title: _data.State.Message,
                    type: "success"
                  });
                  this.$router.push({
                    name: "login"
                  });
                } else {
                  this.$notify.error({
                    title: _data.State.Message,
                    position: "bottom-right"
                  });
                }
              })
              .catch(err => {
                this.$notify.error({
                  title: "可能由于网路原因 通讯失败...",
                  position: "bottom-right"
                });
              });
          } catch (error) {
            this.loading = false;
            console.log("账户注册接口出现问题...");
          }
        } else {
          this.loading = false;
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.qiyeyonghu {
  width: 720px;
  position: relative;
  > i {
    top: 506px;
    left: 72px;
    position: absolute;
    color: #f56c6c;
  }
  .el-form {
    padding-bottom: 60px;
    .el-form-item {
      .code {
        display: flex;
        flex-direction: row;
        .el-input {
          width: 60%;
        }
        .el-button {
          margin-left: 5px;
        }
        .register {
          width: 412px;
        }
      }

      /deep/ .avatar-uploader .el-upload {
        box-sizing: border-box;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      /deep/ .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      /deep/ .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      /deep/ .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    }
    .jumplogin {
      text-align: right;
      padding-right: 138px;
      span {
        color: #ff7200;
        cursor: pointer;
      }
    }
  }
}
</style>